<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Test: regions formatting details example test</title>
    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
    <link rel="help" href="http://dev.w3.org/csswg/css3-regions/#regions-visual-formatting-examples"/>
    <link rel="match" href="regions-auto-size-3-ref.xht"/>
    <meta name="flags" content=""/>
    <meta name="assert" content=
    "The rendering is as described in the processing model example. In particular, region breaks and 
    max-heights are accounting for in flow fragment height computation."/>
    <style>
    /*<![CDATA[*/
#article {
    -webkit-flow-into: article;
    color: black;
    margin: 0px;
    padding: 0px;
}

#article p {
    margin: 0;
}

#main-flow {
    color: #a0a0a0;
    margin-right: 1em;
}

#rA, #rB, #rC {
    -webkit-flow-from: article;
    height: auto;
    border-radius: 0.5em;
    margin: 1em 1em 0em 1em;
    padding: 1em;
    border: 3px solid #46A4E9;
}

#rA {
    width: auto;
    height: auto;
}

#rB {
    float: left;
    width: 15em;
    height: auto;
    max-height: 150px;
}

#rC {
    width: 12em;
    height: auto;
    float: right;
}

#main-flow {
    padding: 0em 1em 0em 1em;
}

/*]]>*/
</style>
</head>
<body>
    <div id="article">
        <div id="blockA" style="width:300px;height:20px;background:#a0a0a0;-webkit-region-break-after:always;"></div>
        <div id="blockB" style="width:100px;height:600px;background:#c0c0c0"></div>
    </div>

    <div id="rA"></div>    
    <div id="rB"></div>
    <div id="rC"></div>
    
    <div id="main-flow">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus orci mi, feugiat quis feugiat imperdiet, scelerisque et sem. Vivamus nec nisi sit amet risus elementum rutrum sed ac mi. Curabitur sapien nulla, dictum eu consectetur et, pulvinar ut ipsum. Nullam non purus non nibh aliquet tincidunt a nec est. Ut vitae libero eu dolor ullamcorper pharetra. Curabitur consequat, felis a fringilla varius, lectus turpis auctor enim, id lacinia tellus lacus at sem. Etiam bibendum nibh vitae purus vestibulum molestie. Phasellus tristique purus eget nisi euismod et feugiat est imperdiet. Phasellus laoreet turpis malesuada nisi sollicitudin scelerisque.</p>
        
        <p>Morbi imperdiet, massa ac molestie lacinia, tortor sapien ornare quam, quis luctus nisl est et purus. Cras vel odio felis, ut rhoncus urna. Maecenas ut quam eu est vehicula feugiat. Praesent eget leo augue, vel tincidunt mauris. Maecenas accumsan, velit dictum sagittis imperdiet, elit velit gravida ligula, in pulvinar velit libero ac nibh. Mauris eget rhoncus magna. Donec ultricies massa tortor, nec euismod nibh. Sed a nibh mauris, venenatis gravida nisl. Cras neque metus, vulputate et cursus non, ultricies sit amet metus. Praesent vestibulum lacinia gravida. Nunc eget nulla quis tellus consectetur aliquam in quis purus. Sed nec turpis vel leo vehicula vulputate ac at diam. Aenean at turpis non enim viverra faucibus a in massa. Donec et dui a leo scelerisque luctus. Cras in justo a mauris hendrerit faucibus.</p>
    </div>
    

</body>
</html>